import React from 'react';
import _ from 'lodash';
import { connect } from 'dva';
import { Toast, Picker, Icon, SearchBar } from 'antd-mobile';
import ChildWrap from '../../../components/layout/childWrap';
import { jump } from '../../../utils';
import PatientList from './patients-list';
import TopPicker from '../../../components/top-picker';
import styles from './index.less';

function Check({ patients: { data, departments, filter }, dispatch }) {
    const onChange = (v) => {
        dispatch({
            type: 'patients/setFilter',
            payload: v[0],
        });
    };
    const departmentFilter = () => {
        return (
            <Picker
                data={departments}
                extra={(<Icon type="down"/>)}
                onChange={onChange}
                cols={1}
            >
                <TopPicker>{filter.departmentName}</TopPicker>
            </Picker>
        );
    };
    const dataList = _.filter(data, ['departmentId', filter.departmentId]);
    const handleSearch = (v) => {
        Toast.fail(`您查询了${v}关键字，查询功能暂不开放`, 1);
    };
    const backHome = (e) => {
        e.preventDefault();
        jump(dispatch)('/');
    };
    const gotoDetail = (value) => {
        jump(dispatch)({
            pathname: 'home/check/patient',
            state: value,
        });
    };
    return (
        <ChildWrap
            iconName="left"
            content={departmentFilter()}
            onLeftClick={backHome}
        >
            <div className={styles.listWrap}>
                <div className={styles.search}>
                    <SearchBar
                        placeholder="搜索姓名、住院号、床位号"
                        onSubmit={handleSearch}
                    />
                </div>
            </div>
            <PatientList
                data={dataList}
                gotoDetail={gotoDetail}
            />
        </ChildWrap>
    );
}

function mapStateToProps({ patients }) {
    return { patients };
}

export default connect(mapStateToProps)(Check);
